<!DOCTYPE html>
<html>
<head>
<?php 
	include_once('../template/header_statics.html');
?>
<script>
    $(document).ready(function(){
    	$("#buscar").click(function(){
    		$("#waitdiv").show();
    		$.post("./statics/buscar.php",{clave:$("#clave").val()}, function(datos){
    			var data = $.parseJSON(datos);
    			
    			if(!data || data.name == null){
    				alert("Lo sentimos!!! clave no encontrada");
    				$("#accept").attr('disabled', true);
    				$("#familia").val("");
    				$("#clave").val("");
    				$("#select").children().remove().end().append('<option value="0">0</option>');
    			}else{
    				$("#accept").removeAttr('disabled');
    				$("#familia").val(data.name);
    				$("#select").children().remove().end().append('<option value="0">0</option>');
    				for(i=1; i<= data.cantidad; i++){
    					if(i == data.confirm){
    						$("#select").append('<option value="'+i+'" selected>'+i+'</option>');
    					}else{
    						$("#select").append('<option value="'+i+'">'+i+'</option>');
    					}
    				}
    			}
    			$("#waitdiv").hide();
    		});
    	});
    	
    	$("#accept").click(function(){
    		$("#waitdiv").show();
    		$.post("./statics/save.php",{clave:$("#clave").val(), select:$("#select").val(), familia:$("#familia").val()}, function(msg){
    			alert(msg);
    			$("#accept").attr('disabled', true);
    			$("#clave").val("");
				$("#familia").val("");
				$("#select").children().remove().end().append('<option value="0">0</option>');
				$("#waitdiv").hide();
    		});
    	});
    });
</script>
</head>
<body>
    <div align="left" style="width: 450px; font-family: 'Century Gothic'; font-size: 14px;">
    	<p>
		  	<label>C&oacute;digo de Invitaci&oacute;n</label>      
		    <input name="clave" type="text" id="clave" size="5" maxlength="4" />
		    <input type="button" name="buscar" id="buscar" value="Buscar" />
		    <br />
		    <br />
		    Familia / Invitado
		    <input name="familia" type="text" id="familia" value="" size="48" readonly />
		</p>
		<p>
			<label>N&uacute;mero de invitados confirmados:</label>
		    <select name="select" id="select">
		      <option value="0">0</option>
		    </select>
		</p>
		<p>
		  <input type="button" name="accept" id="accept" value="Confirmar" disabled/>
		</p>
	</div>
</body>
</html>